<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>annulus</title>
</head>
<body>

<canvas id="canvas" style="width: 250px;height: 250px;">61%</canvas>

<script src="../annulus.js"></script>
<script>
    var fun = {};
    var eleWidth = 250 * 2;
    var width = 150 * 2;
    var fontSize = 50;
    var roundWidth = 15;

    var canvas = document.getElementById('canvas');
    canvas.setAttribute("width", eleWidth);
    canvas.setAttribute("height", eleWidth);
    var ctx =  canvas.getContext('2d');


    fun.draw = function(val){
        ctx.clearRect(0, 0, eleWidth, eleWidth);
        //外圈
        ctx.beginPath();
        ctx.arc(eleWidth/2,eleWidth/2,width/2, -(Math.PI/2), (Math.PI * 2-(Math.PI/2))*1,false);
        ctx.lineWidth = roundWidth;
        ctx.strokeStyle = '#00ACEC';
        ctx.shadowBlur = 0;
        ctx.stroke();

        ctx.beginPath();
        //内圈
        ctx.arc(eleWidth/2,eleWidth/2,width/2 - roundWidth, (Math.PI * 2) * fun.num(0+val) -(Math.PI/2), (Math.PI * 2) * fun.num(0.25+val) -(Math.PI/2),false);
        ctx.lineWidth = roundWidth;
        //ctx.lineCap = "round";
        //ctx.shadowBlur = 10;
        //ctx.shadowColor = "#00acec";
        ctx.strokeStyle = '#7FD4F6';
        ctx.stroke();

        ctx.beginPath();
        //内圈
        ctx.arc(eleWidth/2,eleWidth/2,width/2 - roundWidth, (Math.PI * 2) * fun.num(0.5+val) -(Math.PI/2), (Math.PI * 2) * fun.num(0.75+val) -(Math.PI/2),false);
        ctx.lineWidth = roundWidth;
        //ctx.lineCap = "round";
        //ctx.shadowBlur = 10;
        //ctx.shadowColor = "#00acec";
        ctx.strokeStyle = '#7FD4F6';
        ctx.stroke();

        //绘制文字
        ctx.beginPath();
        ctx.fillStyle = "#00ACEC";
        ctx.font = fontSize + "px sans-serif";
        ctx.textAlign="center";
        ctx.fillText( "234.22", eleWidth/2, eleWidth/2 + fontSize/3);
        ctx.stroke();

    }

    //fun.draw(1);

    var n=0;

    fun.loadCanvas = function () {
        setInterval(function(){
            fun.draw(n);
            n += 0.003;
        },30);
    }

    fun.num = function (num) {
        if(num > 1){
            num = num -1;
        }
        return num;
    }

    fun.loadCanvas();

</script>

</body>
</html>